<template>
  <div class="module-five">
    <div class="wrap">
      <row>
        <i-col span="24" class="module-title">
          <h3>微站优势</h3>
        </i-col>
      </row>

      <Row>
        <i-col span="24" class="text g-mt20">
          <p>微站小程序、电商小程序、门店小程序、会务小程序，助您畅享小程序流量红利</p>
        </i-col>
      </Row>

      <Row type="flex" justify="space-between" class="code-row-bg content g-mt50 g-mb80">
        <i-col :md="5" :sm="10" :xs="24" class="item">
          <img src="./one.jpg" width="500" alt="..." />
          <h4 class="title">
            前期沟通
          </h4>
          <p class="text">强化服务意识。</p>
          <p class="text">主动对接需求。</p>
          <div class="cover transiti">
            <a href="#" class="link-wrap">
              <h4 class="title">前期沟通</h4>
              <p class="cover-text">
                强化服务意识 主动对接需求强化服务意识 主动对接需求强化服务意识
              </p>
              <p class="adapt">
                <span>适用于:</span>
                <em>企业网站</em>
                <em>婚纱</em>
                <em>酒店</em>
                <em>汽车</em>
                <em>房产</em>
              </p>

              <p class="btn-wrap">
                <i class="bg-line l"></i>
                <Button type="primary">了解详细</Button>
                <i class="bg-line r"></i>
              </p>
            </a>
          </div>
        </i-col>

        <i-col :md="5" :sm="10" :xs="24" class="item">
          <img src="./four.jpg" width="500" alt="..." />
          <h4 class="title">
            方案制定
          </h4>
          <p class="text">根据需求文档制定方案。</p>
          <p class="text">获得反馈建议后进行修改，制定最终方案。</p>
          <div class="cover transiti">
            <a href="#" class="link-wrap">
              <h4 class="title">方案制定</h4>
              <p class="cover-text">
                强化服务意识 主动对接需求强化服务意识 主动对接需求强化服务意识
              </p>
              <p class="adapt">
                <span>适用于:</span>
                <em>企业网站</em>
                <em>婚纱</em>
                <em>酒店</em>
                <em>汽车</em>
                <em>房产</em>
              </p>

              <p class="btn-wrap">
                <i class="bg-line l"></i>
                <Button type="primary">了解详细</Button>
                <i class="bg-line r"></i>
              </p>
            </a>
          </div>
        </i-col>

        <i-col :md="5" :sm="10" :xs="24" class="item">
          <img src="./two.jpg" width="500" alt="..." />
          <h4 class="title">
            技术开发
          </h4>
          <p class="text">根据最终方案进行模板开发。</p>
          <p class="text">客户初版预览并反馈，产品定型。</p>
          <div class="cover transiti">
            <a href="#" class="link-wrap">
              <h4 class="title">技术开发</h4>
              <p class="cover-text">
                强化服务意识 主动对接需求强化服务意识 主动对接需求强化服务意识
              </p>
              <p class="adapt">
                <span>适用于:</span>
                <em>企业网站</em>
                <em>婚纱</em>
                <em>酒店</em>
                <em>汽车</em>
                <em>房产</em>
              </p>

              <p class="btn-wrap">
                <i class="bg-line l"></i>
                <Button type="primary">了解详细</Button>
                <i class="bg-line r"></i>
              </p>
            </a>
          </div>
        </i-col>

        <i-col :md="5" :sm="10" :xs="24" class="item">
          <img src="./three.jpg" width="500" alt="..." />
          <h4 class="title">
            产品诞生
          </h4>
          <p class="text">产品诞生。</p>
          <p class="text">部署上线。</p>
          <div class="cover transiti">
            <a href="#" class="link-wrap">
              <h4 class="title">产品诞生</h4>
              <p class="cover-text">
                强化服务意识 主动对接需求强化服务意识 主动对接需求强化服务意识
              </p>
              <p class="adapt">
                <span>适用于:</span>
                <em>企业网站</em>
                <em>婚纱</em>
                <em>酒店</em>
                <em>汽车</em>
                <em>房产</em>
              </p>

              <p class="btn-wrap">
                <i class="bg-line l"></i>
                <Button type="primary">了解详细</Button>
                <i class="bg-line r"></i>
              </p>
            </a>
          </div>
        </i-col>


      </Row>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
    import Row from 'iview/src/components/row'
    import iCol from 'iview/src/components/col'
    import $ from 'jquery'

    export default {
      data() {
        return {

        }
      },
      created() {

      },
      methods: {

      },
      components: {

      }
    }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  @import "~@/common/stylus/variable.styl"
  @import "~@/common/stylus/mixin.styl"

  .module-five
    padding-top: 60px
    background-color: #f1f1f1
    .wrap
      border-bottom: 1px solid #f1f1f1
      .content
        .item
          position: relative
          padding: 13px 13px 23px
          border: 1px solid $main-color
          background-color: #fff
          &:hover
            .cover
              opacity: 1
              box-shadow: 0 0 20px 0 #888
          img
            width: 100%
          h4.title
            padding: 10px 0
            font-weight: bold
            font-size: $font-medium
            text-align: center
          p.text
            margin-top: 5px
            hh(20px)
            sc($font-small-x, #aaa)
            text-align: center
            no-wrap()
          .cover
            display: block
            ltposition(0, 0)
            wh(100%, 100%)
            padding: 5% 10%
            background-color: #fff
            sc($font-small-x, #aaa)
            opacity: 0
            .cover-text
              height: 60px
              line-height: 24px
              margin-top: 10px
              overflow: hidden;
            .adapt
              line-height: 24px
              margin-top: 5px
              span
                color: $back
              em
                font-style: normal
                margin: 0 4px
            .btn-wrap
              bottom: 0
              lrCenter()
  </style>
